import React from 'react'
import { Input, Button } from 'antd'
import axios from '../../config/axios'
import { hostname } from "../../config/host.config"

const { TextArea } = Input

class MeContent extends React.Component {
    constructor(props) {
        super(props)
        this.state = { passFlag: false, user: null, image: null }
    }

    async getUser() {
        const res = await axios.get(hostname + '/users/detail')
        if (res.status === 200 && res.data.statusCode === 1) {
            this.setState({
                user: res.data.statusMsg.account,
                image: res.data.statusMsg.imageUrl
            })
        }
    }

    componentDidMount() {
        this.getUser()
    }

    cancel() {
        this.setState({ passFlag: false })
    }

    render() {
        return (
            <div className="MeContent-warpper">
                <div className="MeContent">
                    <h2>头像信息</h2>
                    <div className="MeContent-list">
                        <span className="MeContent-childLeft">头像</span>
                        <span className="MeContent-childRight">
                            {this.state.image ? <img className="logo" src={this.state.image} /> : null}
                        </span>
                    </div>
                    <div className="line"></div>
                    <h2>用户信息</h2>
                    <div className="MeContent-list">
                        <span className="MeContent-childLeft">帐号</span>
                        <span className="MeContent-childRight">{this.state.user ? this.state.user.account : null}</span>
                    </div>
                    <div className="MeContent-list">
                        <span className="MeContent-childLeft">用户名</span>
                        <span className="MeContent-childRight"><Input
                            value={this.state.user ? this.state.user.username : null} /></span>
                    </div>
                    <div className="MeContent-list">
                        <span className="MeContent-childLeft">邮箱</span>
                        <span className="MeContent-childRight"><Input
                            value={this.state.user ? this.state.user.email : null} /></span>
                    </div>
                    <div className="MeContent-list">
                        <span className="MeContent-childLeft">添加备注</span>
                        <span className="MeContent-childRight">
                            <TextArea placeholder="输入你的个人介绍~" autosize={{ minRows: 3, maxRows: 6 }} />
                        </span>
                    </div>
                    <div className="MeContent-list">
                        <span className="MeContent-childLeft"></span>
                        <span className="MeContent-childRight">
                            <Button type="primary">确定</Button>
                            <Button style={{ margin: '0 20px' }} onClick={() => this.cancel()}>重置</Button>
                        </span>
                    </div>
                    <div className="line"></div>
                    <h2>修改密码</h2>
                    <div className="MeContent-list">
                        <span className="MeContent-childLeft">旧密码</span><span className="MeContent-childRight">
                            <Input type="password" />
                        </span>
                    </div>
                    <div className="MeContent-list">
                        <span className="MeContent-childLeft">新密码</span><span className="MeContent-childRight">
                            <Input type="password" />
                        </span>
                    </div>
                    <div className="MeContent-list">
                        <span className="MeContent-childLeft">确认密码</span><span className="MeContent-childRight">
                            <Input type="password" /></span>
                    </div>
                    <div className="MeContent-list">
                        <span className="MeContent-childLeft"></span>
                        <span className="MeContent-childRight">
                            <Button type="primary">确定</Button>
                            <Button style={{ margin: '0 20px' }} onClick={() => this.cancel()}>重置</Button>
                        </span>
                    </div>
                </div>
                <style>{`
                    .MeContent-warpper {
                        padding: 75px 0 20px 0;
                    } 
                    .MeContent{
                        margin: 0 auto 0;
                        padding: 25px 30px 20px 30px;
                        box-shadow: 0 1px 3px rgba(56, 56, 56, 0.1);
                        background-color: #ffffff;
                        border-radius: 3px;
                        width: 600px;
                    }

                    h2 {
                        font-weight: 600;
                    }
                    
                    .MeContent-list {
                        margin: 15px 0 0;
                        display: flex;
                        align-items: center;
                    }

                    .MeContent-childLeft {
                        flex: 0 0 80px;
                        text-align: right;
                        color: #000000;
                        font-size: 15px;
                    }

                    .logo {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                    }

                    .MeContent-childRight {
                        flex: 1;
                        padding-left: 20px;
                    }

                    .line {
                        height: 1px;
                        margin: 20px 10px 10px 10px;
                        background-color: #c3c3c3;
                    }
                `}</style>
            </div>
        )
    }
}

export default MeContent